<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Inputtext</h1>
        <p>InputText renders a text field to enter data.</p>
    </div>
    <app-demoActions github="inputtext" stackblitz="inputtext-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Basic</h5>
        <input type="text" pInputText [(ngModel)]="value1"> 
        <span class="ml-2">{{value1}}</span>
        
        <h5>Float Label</h5>
        <span class="p-float-label">
            <input id="float-input" type="text" pInputText [(ngModel)]="value2"> 
            <label for="float-input">Username</label>
        </span>

        <h5>Left Icon</h5>
        <span class="p-input-icon-left">
            <i class="pi pi-search"></i>
            <input type="text" pInputText placeholder="Search" [(ngModel)]="value3" />
        </span>

        <h5>Right Icon</h5>
        <span class="p-input-icon-right">
            <i class="pi pi-spin pi-spinner"></i>
            <input type="text" pInputText />
        </span>

        <h5>Help Text</h5>
        <div class="field">
            <label for="username1" class="block">Username</label>
            <input id="username1" type="username" aria-describedby="username1-help" pInputText [(ngModel)]="value4"/>
            <small id="username1-help" class="block">Enter your username to reset your password.</small>
        </div>

        <h5>Invalid</h5>
        <div class="field">
            <label for="username2" class="block">Username</label>
            <input id="username2" type="username" aria-describedby="username2-help" class="ng-invalid ng-dirty" pInputText />
            <small id="username2-help" class="p-error block">Username is not available.</small>
        </div>

        <h5>Invalid with Float Label</h5>
        <span class="p-float-label">
            <input id="float-input-invalid" type="text" pInputText [(ngModel)]="value6" class="ng-invalid ng-dirty"> 
            <label for="float-input-invalid">Username</label>
        </span>

        <h5>Disabled</h5>
        <input id="disabled-input" type="text" pInputText [disabled]="disabled" [(ngModel)]="value5" />

        <h5>Sizes</h5>
        <div class="sizes">
            <input type="text" class="p-inputtext-sm" placeholder="Small" pInputText />
            <input type="text" placeholder="Normal" pInputText />
            <input type="text" class="p-inputtext-lg" placeholder="Large"  pInputText />
        </div>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;InputTextModule&#125; from 'primeng/inputtext';
</app-code>

            <h5>Getting Started</h5>
            <p>InputText is applied to an input field with pInputText directive.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;input type="text" pInputText /&gt;
</app-code>

            <h5>Model Binding</h5>
            <p>A model can be bound using standard ngModel directive.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;input type="text" pInputText [(ngModel)]="property"/&gt;
</app-code>

            <h5>Float Label</h5>
            <p>A floating label is implemented by wrapping the input and the label inside a container with <i>.p-float-label</i> class.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;span class="p-float-label"&gt;
    &lt;input id="float-input" type="text" pInputText&gt; 
    &lt;label for="float-input"&gt;Username&lt;/label&gt;
&lt;/span&gt;
</app-code>

            <h5>Icons</h5>
            <p>An icon can be integrated within an input field by wrapping the input and the icon with an element having either <i>p-input-icon-right</i>
            or <i>p-input-icon-left</i> class depending on the icon location.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;span class="p-input-icon-left"&gt;
    &lt;i class="pi pi-search"&gt;&lt;/i&gt;
    &lt;input type="text" pInputText [(ngModel)]="value1" placeholder="Search"&gt;         
&lt;/span&gt;

&lt;span class="p-input-icon-right"&gt;
    &lt;i class="pi pi-spin pi-spinner"&gt;&lt;/i&gt;
    &lt;input type="text" pInputText [(ngModel)]="value2" &gt;        
&lt;/span&gt; 
</app-code>

            <h5>Sizes</h5>
            <p>2 more sizes are available in addition to a regular input, for a smaller input add <i>p-inputtext-sm</i> and for a larger one, use <i>p-inputtext-lg</i>.
            Note that these classes should be used to change the size of a particular field, for global scaling see <a href="#" [routerLink]="['/theming']">theming</a> page.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;input type="text" pInputText class="p-inputtext-sm" placeholder="Small"&gt;         
&lt;input type="text" pInputText class="p-inputtext-sm" placeholder="Small"&gt;         
&lt;input type="text" pInputText class="p-inputtext-lg"  placeholder="Large"&gt;   
</app-code>

            <p>Instead of repeating the scale classes for each input, sizing can also be applied to a group by adding the
                class to a container element so that descendant inputs share the same style easier</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-inputtext-sm"&gt;
    &lt;input type="text" pInputText&gt;
    &lt;p-inputnumber&gt;&lt;/p-inputnumber&gt;
    &lt;p-inputmask&gt;&lt;/p-inputmask&gt;
&lt;/div&gt;
</app-code>

            <h5>Outlined vs Filled</h5>
            <p>Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color
            to the field. Applying <i>p-input-filled</i> to an ancestor of an input <i>p-input-filled</i> enables the filled style. If you prefer
            to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-input-filled"&gt;
    &lt;input type="text" pInputText&gt;
&lt;/div&gt;   
</app-code>

            <h5>Addons</h5>
            <p>Text, icon, buttons and other content can be grouped next to an input by wrapping the addons and input inside
                <i>.p-inputgroup element</i>. Multiple addons can be used within the same group as well.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-inputgroup"&gt;
    &lt;span class="p-inputgroup-addon"&gt;&lt;i class="pi pi-user"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;input type="text" pInputText placeholder="Username"&gt;         
&lt;/div&gt;

&lt;div class="p-inputgroup"&gt;
    &lt;span class="p-inputgroup-addon"&gt;&lt;i class="pi pi-tags"&gt;&lt;/i&gt;&lt;/span&gt;  
    &lt;span class="p-inputgroup-addon"&gt;&lt;i class="pi pi-shopping-cart"&gt;&lt;/i&gt;&lt;/span&gt;   
    &lt;input type="text" pInputText placeholder="Price"&gt; 
    &lt;span class="p-inputgroup-addon"&gt;$&lt;/span&gt;  
    &lt;span class="p-inputgroup-addon"&gt;.00&lt;/span&gt;      
&lt;/div&gt;
</app-code>

            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that the element should be disabled.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-inputtext</td>
                            <td>Input element</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/inputtext" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-inputtext-demo" class="btn-viewsource ml-2" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;input type="text" pInputText [(ngModel)]="value1"&gt; 
&lt;span class="ml-2"&gt;&#123;&#123;value1&#125;&#125;&lt;/span&gt;

&lt;h5&gt;Float Label&lt;/h5&gt;
&lt;span class="p-float-label"&gt;
    &lt;input id="float-input" type="text" pInputText [(ngModel)]="value2"&gt; 
    &lt;label for="float-input"&gt;Username&lt;/label&gt;
&lt;/span&gt;

&lt;h5&gt;Left Icon&lt;/h5&gt;
&lt;span class="p-input-icon-left"&gt;
    &lt;i class="pi pi-search"&gt;&lt;/i&gt;
    &lt;input type="text" pInputText placeholder="Search" [(ngModel)]="value3" /&gt;
&lt;/span&gt;

&lt;h5&gt;Right Icon&lt;/h5&gt;
&lt;span class="p-input-icon-right"&gt;
    &lt;i class="pi pi-spin pi-spinner"&gt;&lt;/i&gt;
    &lt;input type="text" pInputText /&gt;
&lt;/span&gt;

&lt;h5&gt;Help Text&lt;/h5&gt;
&lt;div class="field"&gt;
    &lt;label for="username1" class="block"&gt;Username&lt;/label&gt;
    &lt;input id="username1" type="username" aria-describedby="username1-help" pInputText [(ngModel)]="value4" /&gt;
    &lt;small id="username1-help" class="block"&gt;Enter your username to reset your password.&lt;/small&gt;
&lt;/div&gt;

&lt;h5&gt;Invalid&lt;/h5&gt;
&lt;div class="field"&gt;
    &lt;label for="username2" class="block"&gt;Username&lt;/label&gt;
    &lt;input id="username2" type="username" aria-describedby="username2-help" class="ng-invalid ng-dirty" pInputText /&gt;
    &lt;small id="username2-help" class="p-error block"&gt;Username is not available.&lt;/small&gt;
&lt;/div&gt;

&lt;h5&gt;Invalid with Float Label&lt;/h5&gt;
&lt;span class="p-float-label"&gt;
    &lt;input id="float-input-invalid" type="text" pInputText [(ngModel)]="value6" class="ng-invalid ng-dirty"&gt; 
    &lt;label for="float-input-invalid"&gt;Username&lt;/label&gt;
&lt;/span&gt;

&lt;h5&gt;Disabled&lt;/h5&gt;
&lt;input id="disabled-input" type="text" pInputText [disabled]="disabled" [(ngModel)]="value5" /&gt;

&lt;h5&gt;Sizes&lt;/h5&gt;
&lt;div class="sizes"&gt;
    &lt;input type="text" class="p-inputtext-sm" placeholder="Small" pInputText /&gt;
    &lt;input type="text" placeholder="Normal" pInputText /&gt;
    &lt;input type="text" class="p-inputtext-lg" placeholder="Large"  pInputText /&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class InputTextDemo &#123;

    disabled: boolean = true;

    value1: string;

    value2: string;

    value3: string;

    value4: string;

    value5: string = 'Disabled';

&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-inputtext-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
